<!--
 * @Description:  
 * @Date: 2020-12-21 10:36:14
 * @LastEditors: lother
 * @LastEditTime: 2021-01-09 14:29:31
 * @FilePath: \AccountOpening-H5\src\views\verification\web\CounterOrder.vue
-->
<template>
    <div>
        <l-header :sliderShow="false" :backShow="true"   :backUrl="'CounterAddress'"></l-header>
        <div class="w89">
            <h2 class="title">{{$t('web.CounterOrder.5636yjg7mzk0')}}</h2>
            <van-form @submit="onSubmit">
                <van-field
                    v-model="form.name"
                    :name="$t('web.CounterOrder.5636yjg7ocs0')"
                    :label="$t('web.CounterOrder.5636yjg7ocs0')"
                    required
                    :placeholder="$t('web.CounterOrder.5636yjg7ocs0')"
                    clearable
                    :rules="[{ required: true, message: $t('login.index.5638rk3g0080')+$t('web.CounterOrder.5636yjg7ocs0') }]"
                />
                 <van-field
                    v-model="form.contact"
                    :name="$t('web.CounterOrder.5636yjg7owg0')"
                    type="tel"
                    clearable
                    required
                    :label="$t('web.CounterOrder.5636yjg7owg0')"
                    :placeholder="$t('web.CounterOrder.5636yjg7owg0')"
                    :rules="[{ required: true, message: $t('login.index.5638rk3g0080')+$t('web.CounterOrder.5636yjg7owg0') }]"
                />
                <k-date :val.sync="form.appointDate" :list='dateList'></k-date>
                <k-date :val.sync="form.appointTime" :list='timeList'></k-date>
                <div class="tip" v-if="branchList['bottom_tip_'+langSuff]==''?false:true">
                    {{branchList['bottom_tip_'+langSuff]}}
                </div>
                <van-button type="info" block class="next-step"  native-type="submit">{{$t('documentType.index.5636jiatocw0')}}</van-button>
            </van-form>
        </div>
    </div>
</template>
<script>
import {  submitList} from '@/api/common'

export default {
    inject: ['branch','StepsPage','user_fill'],
    name:"",
    computed:{
        StepsPageList(){
            return this.StepsPage()
        },
        dateList(){
            var list ={
                    title_zh:this.$t('web.CounterOrder.5636yjg7pms0'),
                    title_en:this.$t('web.CounterOrder.5636yjg7pms0'),
                    title_tc:this.$t('web.CounterOrder.5636yjg7pms0'),
                    is_require:1,
                    type:"date",
            }
            return list
        },
        timeList(){
            var list ={
                    title_zh:this.$t('web.CounterOrder.5636yjg7pww0'),
                    title_en:this.$t('web.CounterOrder.5636yjg7pww0'),
                    title_tc:this.$t('web.CounterOrder.5636yjg7pww0'),
                    is_require:1,
                    type:"time",
            }
            return list
        },
        user_fill_list(){
            return this.user_fill()
        },
        langSuff(){
            return  this.$store.state.langSuff
        },
        branchList(){
            var list  = this.branch()?.web || []
            if(list.length){
                return list[1]
            }
            return list;
        }
    },
    data() {
        return {
            form:{
               name:"",
               contact:"",
               appointDate:"",
               appointTime:"" 
            },
            showPicker: false,
        }
    },
    created(){
        console.log(this.$route.query)
    },
    methods:{
        onSubmit(){
            this.loading=true;
            var { curr_id} =  this.StepsPageList;
            var obj = Object.assign({}, 
                    { pageId:curr_id , 
                    fields :Object.assign({},this.form,{sceneId:this.$route.query.id,legalizeType:3}) 
                    })
            var _this  =this;
            submitList(obj)
            .then(res=>{
                if(res.code==1){
                    this.$nextPage({pageId:this.StepsPageList.next_id})
                    .then(next=>{
                        this.loading = false;
                    })
                }else{
                    this.loading = false;
                     this.$toast(res.msg)
                }
            })
            .catch((res)=>{
                this.loading = false;
            })

        },
        onConfirm(time) {
            this.form.time = time;
            this.showPicker = false;
        },
    },
    watch:{
         user_fill_list:{
            handler(list,old){
                var { name ,contact , appointDate ,  appointTime , sceneId } = list;
                this.form={}
                this.$forceUpdate();
                this.form = { name ,contact , appointDate ,  appointTime  }
                this.form.sceneId = (this.$route.query.id?this.$route.query.id:sceneId)
            },
            immediate:true,
            deep:true
        }
    }
}
</script>
<style lang="less" scoped>
    .tip {
        font-size: 0.22rem;
        color: @placeColor;
        padding:0.1rem 0;
    }
</style>